<template>
  <el-container>
    <!-- 侧边栏，展示歌单封面和标题 -->
    <el-aside class="album-slide">
      <!-- 歌单封面图像，使用 `attachImageUrl` 方法处理图片 URL -->
      <el-image class="album-img" fit="contain" :src="attachImageUrl(songDetails.pic)"/>
      <div class="container">
        <!-- 歌单标题 -->
        <h3 class="album-info">歌单：</h3>
        <p>{{ songDetails.title }}</p>
      </div>
    </el-aside>
    <!-- 主内容区域，展示歌单简介、评分和歌曲列表 -->
    <el-main class="album-main">
      <!-- 歌单简介标题 -->
      <h3>简介</h3>
      <!-- 歌单的简介内容 -->
      <p>{{ songDetails.introduction }}</p>
      <!-- 歌单评分区域 -->
      <div class="album-score">
        <!-- 已评价评分部分 -->
        <div>
          <!-- 显示歌单评分的标题 -->
          <h3>歌单评分</h3>
          <!-- 显示歌单的评分，使用 `v-model` 绑定 `rank`，且不可编辑（禁用） -->
          <el-rate v-model="rank" allow-half disabled></el-rate>
        </div>
        <!-- 显示歌单的评分值，乘以 2 以显示实际评分（由于 `el-rate` 的评分范围是 0.5 到 5） -->
        <span>{{ rank * 2 }}</span>
        <!-- 当前用户评分部分 -->
        <div>
          <!-- 显示用户评价的标题和评分 -->
          <h3>{{ assistText }} {{ score * 2 }}</h3>
          <!-- 显示用户的评分，允许半星，绑定 `score`，并且通过 `disabledRank` 控制是否禁用 -->
          <el-rate allow-half v-model="score" :disabled="disabledRank" @click="pushValue()"></el-rate>
        </div>
      </div>
      <!-- 歌曲列表组件，展示当前歌单中的歌曲 -->
      <song-list class="album-body" :songList="currentSongList"></song-list>
      <!-- 评论组件，传递 `playId` 和类型 -->
      <comment :playId="songListId" :type="1"></comment>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import {defineComponent, ref, computed, getCurrentInstance} from "vue";
import {useStore} from "vuex";
import mixin from "@/mixins/mixin";
import SongList from "@/components/SongList.vue";
import Comment from "@/components/Comment.vue";
import {HttpManager} from "@/api";

export default defineComponent({
  components: {
    SongList, // 歌曲列表组件
    Comment, // 评论组件
  },
  setup() {
    // 获取当前实例的代理对象，用于调用 `this.$message`
    const {proxy} = getCurrentInstance();
    // 获取 Vuex store 实例
    const store = useStore();
    // 从 mixin 中获取 checkStatus 方法
    const {checkStatus} = mixin();

    // 响应式引用：存放当前歌单中的歌曲
    const currentSongList = ref([]);
    // 响应式引用：当前歌单的 ID
    const nowSongListId = ref("");
    // 响应式引用：当前用户对歌单的评分
    const nowScore = ref(0);
    // 响应式引用：歌单的评分
    const nowRank = ref(0);
    // 响应式引用：是否禁用评分功能
    const disabledRank = ref(false);
    // 响应式引用：评分提示文本
    const assistText = ref("评价");

    // 从 Vuex store 中获取歌单详细信息
    const songDetails = computed(() => store.getters.songDetails);
    // 从 Vuex store 中获取当前用户 ID
    const nowUserId = computed(() => store.getters.userId);

    // 设置当前歌单 ID
    nowSongListId.value = songDetails.value.id;

    // 根据歌单 ID 获取歌单中的所有歌曲
    async function getSongId(id: string) {
      // 调用 API 获取歌单中歌曲的 ID 列表
      const result = (await HttpManager.getListSongOfSongId(id)) as ResponseBody;
      // 遍历每个歌曲 ID，获取歌曲详细信息，并添加到 `currentSongList`
      for (const item of result.data) {
        const resultSong = (await HttpManager.getSongOfId(item.songId)) as ResponseBody;
        currentSongList.value.push(resultSong.data[0]);
      }
    }

    // 获取歌单的评分
    async function getRank(id: string) {
      // 调用 API 获取歌单的评分
      const result = (await HttpManager.getRankOfSongListId(id)) as ResponseBody;
      // 设置 `nowRank`，由于评分是 0.5 到 5 之间的值，将其除以 2
      nowRank.value = result.data / 2;
    }

    // 获取当前用户对歌单的评分
    async function getUserRank(userId: string, songListId: string) {
      // 调用 API 获取用户对歌单的评分
      const result = (await HttpManager.getUserRank(userId, songListId)) as ResponseBody;
      // 设置 `nowScore`，评分值除以 2
      nowScore.value = result.data / 2;
      // 禁用评分功能，并更新提示文本
      disabledRank.value = true;
      assistText.value = "已评价";
    }

    // 提交用户评分
    async function pushValue() {
      // 如果评分功能被禁用或者状态不正确，则不执行提交
      if (disabledRank.value || !checkStatus()) return;

      const songListId = nowSongListId.value; // 当前歌单的 ID
      const consumerId = nowUserId.value; // 当前用户的 ID
      const score = nowScore.value * 2; // 计算实际评分值（乘以 2）
      try {
        // 调用 API 提交评分
        const result = (await HttpManager.setRank({songListId, consumerId, score})) as ResponseBody;
        // 显示提交结果的消息
        (proxy as any).$message({
          message: result.message, // 提示信息内容
          type: result.type, // 提示信息类型（如 success, error）
        });

        if (result.success) {
          // 成功提交评分后，更新歌单的评分，禁用评分功能，并更新提示文本
          getRank(nowSongListId.value);
          disabledRank.value = true;
          assistText.value = "已评价";
        }
      } catch (error) {
        // 处理提交评分过程中可能发生的错误
        console.error(error);
      }
    }

    // 调用函数以初始化数据
    getUserRank(nowUserId.value, nowSongListId.value);
    getRank(nowSongListId.value); // 获取歌单评分
    getSongId(nowSongListId.value); // 获取歌单中的歌曲

    // 返回响应式数据和方法
    return {
      songDetails, // 歌单详细信息
      rank: nowRank, // 歌单评分
      score: nowScore, // 当前用户评分
      disabledRank, // 是否禁用评分功能
      assistText, // 评价提示文本
      currentSongList, // 当前歌单中的歌曲
      songListId: nowSongListId, // 当前歌单 ID
      attachImageUrl: HttpManager.attachImageUrl, // 处理图片 URL 的方法
      pushValue, // 提交用户评分的方法
    };
  },
});

</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";

.container {
  display: flex;
  align-items: center;
  padding-top: 30px;
}

.container h3 {
  margin: 0;
  //margin-right: 10px; /* 根据需要调整间距 */
}

.container p {
  margin: 0;
}

// 侧边栏样式
.album-slide {
  display: flex; // 使用 flexbox 布局
  flex-direction: column; // 垂直方向排列
  align-items: center; // 水平方向居中对齐
  padding-top: 5px; // 上边距
  padding-left: 25px;

  .album-img {
    height: 180px; // 图片高度
    width: 180px; // 图片宽度
    //border-radius: 10%; // 图片圆角
    margin-left: 20px;
  }

  //.album-info {
  //  width: 90%; // 标题宽度
  //  padding-top: 2rem; // 上边距
  //  padding-bottom: 0.5rem; // 下边距
  //}
}

// 主内容区域样式
.album-main {
  h1 {
    font-size: 22px; // 歌单简介标题字体大小
  }

  p {
    color: rgba(0, 0, 0, 0.5); // 简介文本颜色，透明度为 0.5
    margin: 10px 0 20px 0px; // 上边距 10px，下边距 20px，左右边距 0
  }

  .album-score {
    display: flex; // 使用 flexbox 布局
    align-items: center; // 垂直方向居中对齐
    margin: 1vw; // 外边距为视口宽度的 1%

    h3 {
      margin: 10px 0; // 标题上下外边距 10px
    }

    span {
      font-size: 60px; // 显示评分值的字体大小
    }

    & > div:last-child {
      margin-left: 10%; // 最后一个子元素的左外边距
    }
  }

  .album-body {
    margin: 20px 0 20px 0px; // 上下外边距 20px，左右边距 0
  }
}

// 响应式设计：当屏幕宽度大于等于 `sm` 变量值时应用的样式
@media screen and (min-width: $sm) {
  .album-slide {
    position: fixed; // 固定定位
    width: 400px; // 侧边栏宽度
  }

  .album-main {
    min-width: 600px; // 主内容区域的最小宽度
    padding-right: 10vw; // 右边距为视口宽度的 10%
    margin-left: 400px; // 左边距，留出侧边栏的空间
  }
}

// 响应式设计：当屏幕宽度小于 `sm` 变量值时应用的样式
@media screen and (max-width: $sm) {
  .album-slide {
    display: none; // 隐藏侧边栏
  }
}

</style>
